<template>
  <div :class="[ mainStore.theme === 'dark' ? 'theme-dark' : 'theme-light' ]">
    <n-config-provider
      :locale="zhCN"
      :date-locale="dateZhCN"
      :theme="mainStore.theme === 'dark' ? darkTheme : lightTheme"
    >
      <n-message-provider>
        <n-dialog-provider>
          <app-router-view></app-router-view>
        </n-dialog-provider>
      </n-message-provider>
    </n-config-provider>
    <div class="loading-mask" v-show="mainStore.loading">
      <div class="loading__pc" v-if="mainStore.isPc">
        <div class="loading__icon"></div>
        <p class="loading__text">加载中...</p>
      </div>
      <div class="loading__m" v-else></div>
    </div>
  </div>

  <div id="js"></div>
</template>

<script setup>
import {
  NConfigProvider,
  zhCN,
  dateZhCN,
  lightTheme,
  darkTheme,
  NMessageProvider,
  NDialogProvider
} from 'naive-ui'
import AppRouterView from './AppRouterView.vue'
import { onMounted, onBeforeUnmount, defineComponent } from 'vue'
import { useMainStore } from './store/main'

const mainStore = useMainStore()
const MOBILE_WIDTH = 640
const PAD_WIDTH = 1024

onMounted(() => {
  mainStore.setDevice(checkDevice())
  window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})

// 判断设备类型
function checkDevice () {
  const width = document.body.clientWidth
  if (width <= MOBILE_WIDTH) return 'mobile'
  if (width > PAD_WIDTH) return 'pc'
  return 'pad'
}

// 处理window resize事件
function resizeHandler () {
  if (!document.hidden) {
    mainStore.setDevice(checkDevice())
  }
}
</script>

<style lang="scss">
@import "./assets/style/loading";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.theme-light {
  color: #111111;
  background: #FFFFFF;
  // 主色
  --main-color: #18a058;
  // 主色的浅色背景
  --light-bg: rgba(24, 160, 88, 0.1);
  // 边框颜色
  --border-color: rgb(239, 239, 245);
  // 次要文字
  --secondary-text: rgb(118, 124, 130);
}

.theme-dark {
  color: #FFFFFF;
  background: #18181c;
  // 主色
  --main-color: #63e2b7;
  // 主色的浅色背景
  --light-bg: rgba(99, 226, 183, 0.15);
  // 边框颜色
  --border-color: rgba(255, 255, 255, 0.09);
  // 次要文字
  --secondary-text: rgba(255, 255, 255, 0.52);
}

.loading-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
